<template>
	<n-form
		ref="formRef"
		:model="formData"
		:rules="rules"
		label-width="80px"
		label-placement="left"
		:style="{
			maxWidth: '340px',
		}">
		<n-form-item label="姓名" path="name">
			<n-input v-model:value="formData.name" placeholder="请输入姓名" />
		</n-form-item>
		<n-form-item label="手机号" path="phone">
			<n-input v-model:value="formData.phone" placeholder="请输入手机号" />
		</n-form-item>
		<n-form-item label="电子信箱" path="email">
			<n-input v-model:value="formData.email" placeholder="请输入电子信箱" />
		</n-form-item>
		<n-form-item label="性别" path="gender">
			<n-radio-group v-model:value="formData.gender">
				<n-radio value="0" label="女"></n-radio>
				<n-radio value="1" label="男"></n-radio>
			</n-radio-group>
		</n-form-item>
		<n-form-item label="角色" path="teacherType">
			<n-select
				v-model:value="formData.teacherType"
				:options=" api.createRoleOptions()"/>
		</n-form-item>
		<n-form-item>
			<n-button type="primary" size="small" @click="save">保存</n-button>
		</n-form-item>
	</n-form>
</template>

<script setup>
import api from '@/data/grade'
import { ref, reactive } from 'vue'
const formRef = ref()
const props = defineProps(['editProps', 'getTable'])
const id = props.editProps.id
const formData = reactive(await api.createFormData(id))
const rules = api.createRules(id)
function save () {
	api.addOrUpdate(id, formData, content => {
		props.editProps.show = false
		props.getTable()
	}, formRef.value)
}

</script>

<style scoped lang="scss">
</style>